import React, { Component } from 'react';
import { Button, Icon, message, Table } from 'antd';
import * as XLSX from 'xlsx';
import styles from "./css/ExcelComponent.module.css";

// 中文转英文
const zToE = {
  '姓名': 'name',
  '年龄': 'age',
  '性别': 'sex',
  '名次': 'ranking',
  '分数': 'score'
}

// 英文转中文
// const eToZ = {
//   'name': '姓名',
//   'age': '年龄',
//   'sex': '性别',
//   'ranking': '名次',
//   'score': '分数'
// }

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
  },
];

class ExcelComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: [],
      list: [],
      tableLoading: false,
      fileName: '',
      currentPage: 1
    }
  }

  // 转换表格成json
  onImportExcel = file => {
    // 获取上传的文件对象
    const { files } = file.target;
    console.log(files);
    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    // 文件加载完成时执行;
    fileReader.onload = event => {
      // 文件a跳到第五页，再打开文件b要重新跳转到第一页
      this.setState({
        currentPage: 1
      })
      try {
        const { result } = event.target;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
        // 存储获取到的数据
        console.log('workbook', workbook);
        let dataName = XLSX.utils.sheet_to_json(workbook.Sheets['统计表']);
        // 最终获取到并且格式化后的 json 数据
        const formDateName = [];
        dataName.map((item, index) => {
          if (item['姓名'] || item['年龄'] || item['性别']) {
            const iData = {};
            iData.index = index;
            iData[zToE['姓名']] = item['姓名'];
            iData[zToE['年龄']] = item['年龄'];
            iData[zToE['性别']] = item['性别'];
            return formDateName.push(iData);
          }
        });

        let dataList = XLSX.utils.sheet_to_json(workbook.Sheets['排序表']);

        const formDateList = [];
        dataList.map((item, index) => {
          if (item['姓名'] || item['名次'] || item['分数']) {
            const iData = {};
            iData.index = index;
            iData[zToE['姓名']] = item['姓名'];
            iData[zToE['名次']] = item['名次'];
            iData[zToE['分数']] = item['分数'];
            formDateList.push(iData);
          };
        });
        this.setState({
          number: formDateName,
          list: formDateList,
          tableLoading: false,
        });
      } catch (e) {
        // 这里可以抛出文件类型错误不正确的相关提示
        this.setState({
          tableLoading: false,
          number: [],
          list: [],
        })
        message.error('文件类型不正确！');
      }
    };
    // 以二进制方式打开文件
    if (files.length > 0) {
      fileReader.readAsBinaryString(files[0]);
      this.setState({
        fileName: files[0].name
      })
    } else {
      this.setState({
        fileName: ''
      })
      message.error('请选择文件');
    }
  }

  // 打开页面
  inputFocus = () => {
    this.setState({
      tableLoading: true,
    });
    this.refs.inputFile.click();
  }

  // 改变页码，改变当前页
  changePage = (e) => {
    this.setState({
      currentPage: e
    });
  }

  render() {
    const { number, currentPage, fileName } = this.state
    return (
      <div>
        <input className={styles.inputFile} type='file' ref="inputFile" accept='.xlsx, .xls' onChange={this.onImportExcel} />
        <Button onClick={() => this.inputFocus()}>
          <Icon type="folder-open" />
          <span>选择</span>
        </Button>
        <span className={styles.fileLink}>{fileName}</span>
        <p>支持 .xlsx、.xls 格式的文件</p>
        <Table size="small" pagination={{ pageSize: 20, defaultCurrent: 1, current: currentPage, onChange: this.changePage }}
          bordered rowKey="index" dataSource={number} columns={columns} />
      </div>
    );
  }
}
export default ExcelComponent;
